<template>
  <div>
    <div class="card-text">
      <h1>Other Lectures</h1>
    </div>
    <div style="text-align: center;">
      <OtherLecturesInfoCard 
        v-for="(i,index) in datas"
        :key="index"
        :hname    = "i.hname"
        :title    = "i.title"
        :schedule    = "i.schedule"
        :location    = "i.location"
        :abstract = "i.abstract"
        :synopsis = "i.synopsis"
        :imgUrl   = "i.imgUrl"
      />
    </div>
    
</div>

</template>

<script>
import OtherLecturesInfoCard from "../components/SummerSchool/OtherLecturesInfoCard.vue" 

export default {
  components: { OtherLecturesInfoCard },
  data() {
    return {
      datas: []
    };
  },
  created() {
    this.$http.get('/json/OtherLectures.json').then((response) => {
      // console.log(response);
      this.datas = response.data.datas;
    });

  }



}
</script>

<style lang="less" scoped>
@import "../components/typora_like.less";
table {
  margin: 0 auto;
}

table,table tr th, table tr td { 
  border:1px solid #0094ff; 
  padding: 2px;
}
table {
  width: 90%;
  min-height: 25px;
  line-height: 45px;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}
</style>
